<!-- Created by henian.xu on 2018/11/8. -->

<template>
    <linker
        :to="`/goods/details/${data.id}`"
        ssr
        class="goods-item"
        :style="itemStyle">
        <div class="inner">
            <div class="img-obj">
                <div
                    class="inner"
                    :style="`background-image: url('${data.mainImageUrl || $defaultImg}');`"/>
            </div>
            <div class="content">
                <div class="label">{{ data.goodsName }}</div>
                <div class="info">
                    <div class="item">{{ data.companyRegionName }}</div>
                    <div
                        class="item"
                        title="30天成交23件"><i class="f-icon">&#xf017;</i> 88件</div>
                </div>
            </div>
        </div>
    </linker>
</template>

<script>
export default {
    name: 'GoodsItem',
    inject: {
        GoodsList: { default: 'GoodsList' },
    },
    data() {
        return {};
    },
    props: {
        data: {
            type: Object,
            default() {
                return {};
            },
            required: true,
        },
        itemWidth: {
            type: [Number, String],
            default: 0,
        },
    },
    computed: {
        itemStyle() {
            const itemWidth = this.itemWidth || this.GoodsList ? this.GoodsList.itemWidth : '100%';
            let width = itemWidth;
            if (typeof itemWidth === 'number') {
                width += 'px';
            }
            return { width };
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.goods-item {
    display: block;
    > .inner {
        background-color: #fff;
        border: 1px solid $color-border;
        cursor: pointer;

        > .img-obj {
            > .inner {
                width: 100%;
                height: 0;
                padding-top: 100%;
                background: transparent center no-repeat;
                background-size: cover;
            }
        }
        > .content {
            padding: $padding;

            > .label {
                @include text-line(2);
                height: $body-font-size * $line-height * 2;
            }
            > .info {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                > .item {
                    color: $gray6;
                    @include text-line(1);
                }
            }
        }
    }
}
</style>
